<template>
  <HeaderOne :activeIndex="activeIndex"></HeaderOne>
  <bread-crumb>
    <template #one>产品信息</template>
    <template #two>上传产品信息</template>
  </bread-crumb>
  <el-card shadow="always" style="margin: 20px;">
    <el-row :gutter="20" class="header" v-if="isMounted">
      <search-bar
          :add-text = searchBarText.addText
          :search-text= searchBarText.searchText
          :placeholder-context= searchBarText.placeholderContext
          @initGetProductInfo="init"
          @handleDialogProductValue="handleDialogProductValue"
      >
      </search-bar>
            <one-table
                    :table-data="tableData"
                    :options-info="optionsProductInfo"
                    @handleDialogProductValue="handleDialogProductValue"
                    @delProductInfo="delProductInfo"
            ></one-table>
      <paging :queryForm="queryForm"
              @my-size-change="handleSizeChange"
              @my-current-change="handleCurrentChange">
      </paging>
    </el-row>
  </el-card>
  <DialogProduct :dialogProductTitle="dialogTitle"
                 v-model="dialogVisible"
                 v-if="dialogVisible"
                 @initGetProductInfo="init"
                 :dialogProductTableValue="dialogProductTableValue"
                 @handleConfirm="handleConfirm"
  />
</template>

<script setup>
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {
  addProductInfo,
  deleteProductInfo,
  editProductInfo,
  upProductInfo
} from "@/api/apiPath/onePartApi.js"
import {optionsProductInfo} from "@/api/options/onePart/optionsProductInfo.js"
import {ElMessage, ElMessageBox, ElNotification} from "element-plus";
import {isNull} from "@/api/filters.js";
import DialogProduct from "@/components/dialog/one/dialogProduct.vue";
import HeaderOne from "@/components/header/headOne.vue"
import Paging from "@/components/pagination/paging.vue";
import OneTable from "@/components/table/oneTable.vue";
import SearchBar from "@/components/commons/searchBar.vue";
import BreadCrumb from "@/components/commons/breadCrumb.vue";
import {initTableInfo} from "@/api/methods/initInfo.js";
import {addTableInfo} from "@/api/methods/addInfo.js";
import {updateFormInfo} from "@/api/methods/updateInfo.js";
import {delTableInfo} from "@/api/methods/delInfo.js";

const router = useRouter() //实例化路由
const activeIndex = ref(`/upLoadProductInfo`)
const queryForm = ref({
  query: '',
  pageNum: 1,
  pageSize: 5,
  totalSize: 0
})
const tableData = ref([])
const dialogVisible = ref(false)
const dialogTitle = ref('')
const dialogTableValue = ref({})
const dialogProductTableValue = ref({})
const searchBarText = ref({
  addText : "添加产品",
  searchText : "搜索产品",
  placeholderContext: "请输入产品名称"
})
const isMounted = ref(false)
const init = (query)=> {
    queryForm.value.query = query
    initTableInfo(upProductInfo(queryForm.value), tableData, queryForm)
}
onMounted(()=> {
    init()
    isMounted.value = true
})

const handleSizeChange = (pageSize)=> {
  queryForm.value.pageSize = pageSize
  queryForm.value.pageNum = 1
  init()
}
const handleCurrentChange = (pageNum)=> {
  queryForm.value.pageNum = pageNum
  init()
}
const handleDialogProductValue = (row)=> {
  // console.log("handleDialogProductValue:")
  // console.log(row)
  if (isNull(row)) {
    dialogTitle.value = "添加产品信息"
    dialogProductTableValue.value = {}
  } else {
    dialogTitle.value = "编辑产品信息"
    dialogProductTableValue.value = JSON.parse(JSON.stringify(row))
  }
  dialogVisible.value = true
}

const handleConfirm = async (formValue, formRef)=> {
  formValue = ref(formValue)
  formRef.validate( async valid => {
    if (!valid) {
      ElMessage({
        message: "请填写完整！",
        type: 'warning',
        duration: 1500
      })
    } else {
      try {
        dialogTitle.value === '添加产品信息'
            ? addTableInfo(addProductInfo(), formValue, upProductInfo(queryForm.value), tableData, queryForm)
            : updateFormInfo(editProductInfo(), formValue, upProductInfo(queryForm.value), tableData, queryForm)
        dialogVisible.value = false
      }catch (err) {
        console.log("errorOne" + err)
        ElNotification({
          message: "请求失败~",
          type: 'error',
          duration: 1500
        })
      }
    }
  })
}

const delProductInfo = (row)=> {
  ElMessageBox.confirm(
      '此操作将永久删除该信息，是否继续？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        try {
          delTableInfo(deleteProductInfo(row.bh), tableData, queryForm, upProductInfo(queryForm.value))
        } catch (e) {
          console.log(e)
          ElNotification({
            message: "请求失败",
            type: 'error',
            duration: 1500
          })
        }
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消删除',
        })
      })
}
</script>

<style scoped>
.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}
</style>